<template>
    <div class="p-2">
        <transition>
            <div v-show="showSearch" class="mb-[10px]">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryPersonnel" :inline="true">
                        <el-form-item label="房间">
                            <el-select v-model="queryPersonnel.roomId" placeholder="房间" clearable>
                                <el-option v-for="(item, index) in roomList" :key="index"  :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="hover" v-loading="loading">

            <div style="display: flex;flex-wrap: wrap;">
                <el-card class="box-card" v-for="(item, index) in userListNew" :key="index">
                    <div style="display: flex;">
                        <el-image style="width: 90px; height: 110px" :src="item.sysUser.avatarUrl"
                            fit="fill"></el-image>
                        <div
                            style="margin-left: 25px;display: flex;flex-direction: column;justify-content: space-between;font-size: 18px;">
                            <div style="font-weight: bold;">{{ item.sysUser.nickName }}</div>
                            <div>职称:{{ item.roleName }}</div>
                            <div>房间:{{ item.iotRoom.name }}</div>
                            <div>部门:{{ item.deptName }}</div>
                        </div>
                    </div>
                    <div style="font-size: 13px;display: flex;margin-top: 20px;">
                        <div @click="setUserStatus(item, 0)"
                            :class="item.sysUser.workStatus == '0' ? 'triangle-container' : 'triangle-container-no'">空闲中
                        </div>
                        <div @click="setUserStatus(item, 1)"
                            :class="item.sysUser.workStatus == '1' ? 'triangle-container' : 'triangle-container-no'"
                            style="margin-left: 15px;">繁忙中</div>
                        <div @click="setUserStatus(item, 2)"
                            :class="item.sysUser.workStatus == '2' ? 'triangle-container' : 'triangle-container-no'"
                            style="margin-left: 15px;">已离开</div>
                    </div>
                </el-card>


                <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
                    <el-empty description="暂无用户信息" v-if="userListNew.length ==0"></el-empty>
                </div>
            </div>
        </el-card>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { list, addDevice, updateDevice, deleteDevice } from '@/api/information/index';
import { listPersonnel } from "@/api/personnel/index";
import { updateUser } from "@/api/system/user";
import { listRoom } from "@/api/region/index";
export default {
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceName: '',
                deviceStatus: ''
            },
            deviceList: [],
            loading: true,
            showSearch: true,
            isExpandAll: false,
            dialog: {
                visible: false,
                title: ''
            },
            dialogLook: {
                visible: false,
                title: '设备实时'
            },
            initFormData: {
                id: '',
                deviceName: '',
                deviceType: '',
                deviceMac: '',
                deviceIp: '',
                deviceStatus: '',
                deviceCommunication: ''
            },
            roomList: [],
            userListNew: [],
            queryPersonnel: {
                pageNum: 1,
                pageSize: 8,
                total: 0
            },
            rules: {
                deviceName: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
                deviceIp: [{ required: true, message: '设备IP不能为空', trigger: 'blur' }],
                deviceMac: [{ required: true, message: '设备MAC不能为空', trigger: 'blur' }],
                deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
                deviceCommunication: [{ required: true, message: '设备通讯方式不能为空', trigger: 'change' }],
                deviceStatus: [{ required: true, message: '设备状态不能为空', trigger: 'change' }]
            },
            menuTableRef: null,
            total: 0
        };
    },
    mounted() {
        // this.getList();
        this.getlistPersonnel();
        this.getListRoom()
        this.loading = false;
    },
    methods: {
        /** 查询房间 */
        getListRoom() {
            listRoom(this.queryParamsRoom).then(response => {
                this.roomList = response.rows;
            });
        },
        // 查询空间用户
        getlistPersonnel(row) {
            listPersonnel(this.queryPersonnel).then(response => {
                this.userListNew = response.rows
                this.loading = false
                this.total = response.total
            });
        },
        async getList() {
            this.loading = true;
            const res = await list(this.queryParams);
            this.deviceList = res.rows;
            // this.total = res.total
            this.loading = false;
        },
        cancel() {
            this.$nextTick(() => {
                this.reset();
            })
            this.dialog.visible = false;
            this.dialogLook.visible = false;
        },
        reset() {
            this.$refs.menuFormRef.resetFields();
        },
        handleQuery() {
            this.getlistPersonnel();
        },
        resetQuery() {
            // this.$refs.queryFormRef.resetFields();
            this.queryPersonnel.roomId = ""
            this.handleQuery();
        },
        handleAdd() {
            this.dialog.visible = true;
            this.dialog.title = '添加设备';
            this.reset();
        },
        async handleUpdate(row) {
            this.dialog.visible = true;
            this.dialog.title = '修改设备';
            this.$nextTick(() => {
                this.reset();
                this.initFormData = { ...row };
            })
        },
        submitForm() {
            this.$refs.menuFormRef.validate(async (valid) => {
                if (valid) {
                    if (this.initFormData.id) {
                        updateDevice(this.initFormData).then((res) => {
                            this.infoList = res.rows;
                            this.getList();
                        });
                    } else {
                        addDevice(this.initFormData).then((res) => {
                            this.infoList = res.rows;
                            this.getList();
                        });
                    }
                    this.$modal.msgSuccess('操作成功');
                    this.dialog.visible = false;
                }
            });
        },
        handleDelete(row) {
            this.$confirm(`是否确认删除名称为"${row.deviceName}"的数据项?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDevice(row.id).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        viewApp() {
            this.dialogLook.visible = true;
        },
        setUserStatus(val, statu) {
            this.$confirm('此操作将修改当前工作状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateUser(val.sysUser).then((res) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                val.sysUser.workStatus = statu
                this.getList();
            });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });
        }
    }
};
</script>
<style scoped>
.box-card {
    width: 22%;
    color: #4d648f;
    margin-left: 25px;
    margin-top: 15px;
}

.triangle-container {
    position: relative;
    /* 必须是相对定位或绝对定位，以便正确放置伪元素 */
    display: inline-block;
    /* 确保元素能调整大小以适应内容 */
    padding: 10px;
    cursor: pointer;
    /* 示例边框 */
}

.triangle-container-no {
    position: relative;
    /* 必须是相对定位或绝对定位，以便正确放置伪元素 */
    display: inline-block;
    /* 确保元素能调整大小以适应内容 */
    padding: 10px;
    cursor: pointer;
    /* 示例边框 */
}

.triangle-container:before {
    content: "";
    position: absolute;
    bottom: -8px;
    /* 将图标放置在容器的下方，负值根据图标大小调整 */
    left: 50%;
    /* 水平居中 */
    transform: translateX(-50%);
    /* 水平居中调整 */
    width: 0;
    height: 0;
    background-image: url('../../assets/images/sjx.png');
    /* 替换为你自己的图标路径 */
    background-size: cover;
    /* 适应容器大小 */
    background-repeat: no-repeat;
    width: 14px;
    /* 根据图标大小调整 */
    height: 13px;
    /* 根据图标大小调整 */
}
</style>